<template>
    <el-row class="leave">
        <!-- <el-col :span="5" style="height:100%">
            <div class="block">
                <el-timeline>
                    <el-timeline-item v-for="(activity, index) in activities" :key="index" :icon="activity.icon"
                        :type="activity.type"  :size="activity.taskDefId==taskKey?'large':'normal'" :timestamp="activity.taskCreateTime"
                        @click.native="handleChangeTime(activity)">
                        <h4>{{ activity.taskName }}</h4>
                        <span>{{ activity.assignee }}</span>
                        <span class='submit' v-if="activity.comment == '提交申请'">提交</span>
                        <span class='end' v-else-if="activity.comment == '自动结束'">结束</span>
                        <span class='agree' v-if="activity.pass=='true'">同意</span>
                        <span class='reject' v-else-if="activity.pass=='false'">拒绝</span>
                    </el-timeline-item>
                </el-timeline>
            </div>
        </el-col> -->

        <div class="data">
            <el-form class="form" :model="form" :rules="rules" :disabled="init != '1'" ref="form" label-width="120px">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="请假类型" prop="type">
                            <el-select v-model="form.type" :disabled="init != '1'" style="width: 220px">
                                <el-option v-for="dict in typeOptions" :key="dict.dictValue" :label="dict.dictLabel"
                                    :value="dict.dictValue"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="18">
                        <el-form-item label="标题" prop="title">
                            <el-input v-model="form.title" style="width: 220px" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="原因" prop="reason">
                    <el-input v-model="form.reason" type="textarea" style="width: 220px" />
                </el-form-item>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="开始时间" prop="leaveStartTime">
                            <el-date-picker clearable size="small" style="width: 220px" v-model="form.leaveStartTime"
                                type="date" value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="结束时间" prop="leaveEndTime">
                            <el-date-picker clearable size="small" style="width: 220px" v-model="form.leaveEndTime"
                                type="date" value-format="yyyy-MM-dd" >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="申请人" prop="applyUserName">
                            <el-input v-model="form.applyUserName"  style="width: 220px" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="申请时间" prop="applyTime">
                            <el-date-picker clearable size="small" style="width: 220px" v-model="form.applyTime" type="date"
                                value-format="yyyy-MM-dd" >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="form.remark" type="textarea" style="width: 220px" />
                </el-form-item>

            </el-form>
            <el-divider v-if="init != '1'"></el-divider>
            <el-form v-if="init != '1'" class="form" label-width="120px" :disabled="taskType == '1'">
                <el-form-item label="审批意见">
                    <el-radio-group v-model="pass">
                        <el-radio label="true">同意</el-radio>
                        <el-radio label="false">驳回</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="批注" prop="remark">
                    <el-input v-model="comment" type="textarea" style="width: 40%;" :value="comment" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="complete">确 定</el-button>
                <el-button @click="close">关 闭</el-button>
            </div>
        </div>
    </el-row>
</template>
  
<script>
import { listLeave, getLeave, delLeave, addLeave, updateLeave, getByInstanceId, checkTask, selectByInstanceId } from "@/api/leave/leave";
import { listTaskHistory } from '@/api/activiti/customprocess'
import { type } from "os";
export default {
    name: "reviewLeave",
    data() {
        return {
            title: '查看请假表单',
            form: {},
            open: false,
            // 请假类型字典
            typeOptions: [],
            // 表单校验
            rules: {
                type: [
                    { required: true, message: "请假类型不能为空", trigger: "blur" },
                ],
                title: [
                    { required: true, message: "标题不能为空", trigger: "blur" },
                ],
                reason: [
                    { required: true, message: "原因不能为空", trigger: "blur" },
                ],
                leaveStartTime: [
                    { required: true, message: "开始时间不能为空", trigger: "blur" },
                ],
                leaveEndTime: [
                    { required: true, message: "结束时间不能为空", trigger: "blur" },
                ],
                realityStartTime: [
                    { required: true, message: "实际开始时间不能为空", trigger: "blur" },
                ],
                realityEndTime: [
                    { required: true, message: "实际结束时间不能为空", trigger: "blur" },
                ],
            },
            instanceId: '',
            taskId: '',
            pass: '',
            comment: '',
            taskType: '',
            activities: [{
                content: '支持使用图标',
                timestamp: '2018-04-12 20:46',
                size: 'large',
                type: 'success',
            }, {
                content: '支持自定义颜色',
                timestamp: '2018-04-03 20:46',
                type: 'warning'
            }, {
                content: '支持自定义尺寸',
                timestamp: '2018-04-03 20:46',
                size: 'large',
                type: 'danger'
            }, {
                content: '默认样式的节点',
                timestamp: '2018-04-03 20:46'
            }],
            taskKey: '',
            init: '0'
        }
    },
    created() {
        console.log("query", this.$route.query)
        this.instanceId = this.$route.query.instanceId
        this.taskId = this.$route.query.taskId
        this.taskType = this.$route.query.taskType
        this.taskKey = this.$route.query.taskKey
        this.init = this.$route.query.init
        this.queryHistoryTask()
        this.getFormData()
        if (this.taskType == '1') {
            this.queryCheckTask()
        }
        this.getDicts("biz_leave_type").then(response => {
            this.typeOptions = response.data;
        });
        this.$store.getters.name
    },
    methods: {
        handleChangeTime(activity) {
            console.log('handleChangeTime click', activity)
        },
        async getFormData() {
            let response = await getByInstanceId(this.instanceId)
            this.row = response.data
            this.form = response.data
        },
        async queryCheckTask() {
            let param = {
                instanceId: this.instanceId,
                taskId: this.taskId
            }
            let response = await selectByInstanceId(param)
            this.pass = response.data.reviewStatus
            this.comment = response.data.reason
            console.log('response ', response)
        },
        async queryHistoryTask() {
            let response = await listTaskHistory(this.instanceId)
            console.log('queryHistoryTask res', response)
            this.activities = response.data
        },
        close() {
            window.close();
        },
        /** 提交按钮 */
        update() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.id != null) {
                        updateLeave(this.form).then(response => {
                            this.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        addLeave(this.form).then(response => {
                            this.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        complete() {
            if (this.init == '1') {
                this.update()
                let paramData = {
                    reviewStatus: '',
                    reason: '提交申请',
                    taskId: this.taskId,
                    instanceId: this.instanceId
                }
                console.log('complete')
                checkTask(paramData).then(res => {
                    console.log('response ', res)
                    this.msgSuccess('操作成功');
                    window.close();
                });
            } else {
                let paramData = {
                    reviewStatus: this.pass,
                    reason: this.comment,
                    taskId: this.taskId,
                    instanceId: this.instanceId
                }
                console.log('complete')
                checkTask(paramData).then(res => {
                    console.log('response ', res)
                    this.msgSuccess('操作成功');
                    window.close();
                });
            }
        }
    }
}
</script>
  
<style scoped>
.form {
    padding-top: 20px;
    padding-left: 50px;
}

.data {
    height: 100%;
}

.dialog-footer {
    position: absolute;
    bottom: 50px;
    width: 100%;
    left: 50%;
}

.leave {
    height: calc(100% - 50px);
}

.agree {
    margin-left: 8px;
    font-size: 10px;
    color: white;
    padding-left: 7px;
    padding-right: 7px;
    padding-top: 3px;
    padding-bottom: 3px;
    line-height: 19px;
    border-radius: 10px;
    background-color: #32b683;
}

.reject {
    margin-left: 8px;
    font-size: 10px;
    color: white;
    padding-left: 7px;
    padding-right: 7px;
    padding-top: 3px;
    padding-bottom: 3px;
    line-height: 19px;
    border-radius: 10px;
    background-color: #b63239;
}

.submit {
    margin-left: 8px;
    font-size: 10px;
    color: white;
    padding-left: 7px;
    padding-right: 7px;
    padding-top: 3px;
    padding-bottom: 3px;
    line-height: 19px;
    border-radius: 10px;
    background-color: #1a8ae6;
}

.end {
    margin-left: 8px;
    font-size: 10px;
    color: white;
    padding-left: 7px;
    padding-right: 7px;
    padding-top: 3px;
    padding-bottom: 3px;
    line-height: 19px;
    border-radius: 10px;
    background-color: #1a8ae6;
}
</style>
  